<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useSettingsStore } from '../stores/settings'
import { getVersion } from '@tauri-apps/api/app'

const state = reactive({ version: '' })

onMounted(async () => {
  state.version = await getVersion() // 异步操作移到 mounted
})

const settingsStore = useSettingsStore()

const settings = ref({
  maxItems: settingsStore.maxItems,
  startWithSystem: settingsStore.startWithSystem,
  minimizeToTray: settingsStore.minimizeToTray,
  shortcut: settingsStore.shortcut || 'Alt+Space'
})

const saveSettings = async () => {
  await settingsStore.updateSettings(settings.value)
}

const getGradientColor = (value: number) => {
  const percentage = ((value - 10) / (1000 - 10)) * 100
  return `linear-gradient(to right, hsl(var(--p)) ${percentage}%, hsl(var(--b2)) ${percentage}%)`
}

const isRecording = ref(false)
const recordShortcut = () => {
  isRecording.value = true
  const handleKeyDown = (e: KeyboardEvent) => {
    e.preventDefault()

    const keys = []
    if (e.ctrlKey) keys.push('CommandOrControl')
    if (e.altKey) keys.push('Alt')
    if (e.shiftKey) keys.push('Shift')
    if (e.metaKey) keys.push('Meta')

    // 处理特殊键
    const specialKeys: Record<string, string> = {
      ' ': 'Space',
      'Control': 'CommandOrControl',
      'Meta': 'Meta',
      'Alt': 'Alt',
      'Shift': 'Shift',
      'Enter': 'Enter',
      'Escape': 'Escape',
      'Tab': 'Tab',
      'ArrowUp': 'Up',
      'ArrowDown': 'Down',
      'ArrowLeft': 'Left',
      'ArrowRight': 'Right'
    }

    // 如果是修饰键，不要立即结束录制
    if (['Control', 'Alt', 'Shift', 'Meta'].includes(e.key)) {
      return
    }

    // 获取键名
    const keyName = specialKeys[e.key] || e.key.toUpperCase()
    keys.push(keyName)

    // 确保至少有一个修饰键
    if (e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) {
      settings.value.shortcut = keys.join('+')
      isRecording.value = false
      window.removeEventListener('keydown', handleKeyDown)
    }
  }

  window.addEventListener('keydown', handleKeyDown)
}
</script>

<template>
  <div class="h-full bg-base-100 flex flex-col">
    <header class="flex-none border-b border-base-200 bg-base-100/80 backdrop-blur-md sticky top-0">
      <div class="max-w-2xl mx-auto px-4 py-3">
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
              <i class="ri-settings-4-line text-primary text-xl"></i>
            </div>
            <div>
              <h2 class="text-lg font-medium">设置</h2>
              <p class="text-xs text-base-content/60">自定义您的剪贴板管理器首选项</p>
            </div>
          </div>
          <button class="btn btn-primary btn-sm gap-2 min-h-8 h-8" @click="saveSettings">
            <i class="ri-save-line"></i>
            保存更改
          </button>
        </div>
      </div>
    </header>

    <main class="flex-1 relative">
      <div class="absolute inset-0 overflow-y-auto custom-scrollbar">
        <div class="max-w-2xl mx-auto px-4 py-4">
          <div class="space-y-3">


            <!-- 历史记录设置 -->
            <div class="group card bg-base-200 hover:shadow-md transition-all duration-300">
              <div class="card-body p-4">
                <div class="flex items-center gap-3 mb-4">
                  <div
                    class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i class="ri-history-line text-primary text-xl"></i>
                  </div>
                  <div>
                    <h3 class="font-medium">历史记录</h3>
                    <p class="text-xs text-base-content/60">管理剪贴板历史记录设置</p>
                  </div>
                </div>

                <div class="form-control w-full">
                  <div class="flex justify-between items-baseline mb-2">
                    <span class="text-sm">最大保存数量</span>
                    <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-primary/10 text-primary">
                      {{ settings.maxItems }} 条
                    </span>
                  </div>
                  <input v-model="settings.maxItems" type="range" min="10" max="1000" class="range range-xs" step="10"
                    :style="{ background: getGradientColor(settings.maxItems) }" />
                  <div class="w-full flex justify-between text-xs text-base-content/60 mt-1.5">
                    <span>10条</span>
                    <span>500条</span>
                    <span>1000条</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 系统行为设置 -->
            <div class="group card bg-base-200 hover:shadow-md transition-all duration-300">
              <div class="card-body p-4">
                <div class="flex items-center gap-3 mb-4">
                  <div
                    class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i class="ri-settings-4-line text-primary text-xl"></i>
                  </div>
                  <div>
                    <h3 class="font-medium">系统行为</h3>
                    <p class="text-xs text-base-content/60">配置应用程序行为</p>
                  </div>
                </div>

                <div class="space-y-2">
                  <label
                    class="flex items-start gap-3 p-3 rounded-xl hover:bg-base-100 transition-all cursor-pointer border border-transparent hover:border-base-300">
                    <input v-model="settings.startWithSystem" type="checkbox"
                      class="checkbox checkbox-primary checkbox-sm mt-0.5" />
                    <div>
                      <div class="text-sm font-medium">开机自启</div>
                      <div class="text-xs text-base-content/60">系统启动时自动运行应用程序</div>
                    </div>
                  </label>

                  <label
                    class="flex items-start gap-3 p-3 rounded-xl hover:bg-base-100 transition-all cursor-pointer border border-transparent hover:border-base-300">
                    <input v-model="settings.minimizeToTray" type="checkbox"
                      class="checkbox checkbox-primary checkbox-sm mt-0.5" />
                    <div>
                      <div class="text-sm font-medium">最小化到托盘</div>
                      <div class="text-xs text-base-content/60">关闭窗口时在系统托盘中继续运行</div>
                    </div>
                  </label>
                </div>
              </div>
            </div>

            <!-- 快捷键设置 -->
            <div class="group card bg-base-200 hover:shadow-md transition-all duration-300">
              <div class="card-body p-4">
                <div class="flex items-center gap-3 mb-4">
                  <div
                    class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i class="ri-keyboard-line text-primary text-xl"></i>
                  </div>
                  <div>
                    <h3 class="font-medium">快捷键</h3>
                    <p class="text-xs text-base-content/60">设置唤醒程序的快捷键</p>
                  </div>
                </div>

                <div class="flex items-center gap-3">
                  <button class="btn btn-sm flex-1 font-mono relative overflow-hidden"
                    :class="{ 'btn-primary': isRecording }" @click="recordShortcut">
                    <i class="ri-keyboard-box-line mr-2"></i>
                    <span class="relative z-10">{{ isRecording ? '请按下快捷键...' : settings.shortcut }}</span>
                    <div v-if="isRecording" class="absolute inset-0 bg-primary animate-pulse opacity-20">
                    </div>
                  </button>
                </div>
              </div>
            </div>

            <!-- 关于信息 -->
            <div class="group card bg-base-200 hover:shadow-md transition-all duration-300">
              <div class="card-body p-4">
                <div class="flex items-center gap-3 mb-4">
                  <div
                    class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i class="ri-information-line text-primary text-xl"></i>
                  </div>
                  <div>
                    <h3 class="font-medium">关于</h3>
                    <p class="text-xs text-base-content/60">应用程序信息</p>
                  </div>
                </div>

                <div class="grid grid-cols-2 gap-2">
                  <div class="flex flex-col gap-1 p-3 rounded-xl bg-base-100 hover:bg-base-300/50 transition-colors">
                    <div class="flex items-center gap-2">
                      <i class="ri-code-s-slash-line text-primary/60"></i>
                      <span class="text-xs text-base-content/60">版本</span>
                    </div>
                    <span class="font-medium">{{ state.version }}</span>
                  </div>
                  <div class="flex flex-col gap-1 p-3 rounded-xl bg-base-100 hover:bg-base-300/50 transition-colors">
                    <div class="flex items-center gap-2">
                      <i class="ri-user-line text-primary/60"></i>
                      <span class="text-xs text-base-content/60">作者</span>
                    </div>
                    <span class="font-medium">何三</span>
                  </div>
                  <div class="flex flex-col gap-1 p-3 rounded-xl bg-base-100 hover:bg-base-300/50 transition-colors">
                    <div class="flex items-center gap-2">
                      <i class="ri-file-paper-2-line text-primary/60"></i>
                      <span class="text-xs text-base-content/60">公众号</span>
                    </div>
                    <span class="font-medium">何三笔记</span>
                  </div>
                  <div class="flex flex-col gap-1 p-3 rounded-xl bg-base-100 hover:bg-base-300/50 transition-colors">
                    <div class="flex items-center gap-2">
                      <i class="ri-calendar-line text-primary/60"></i>
                      <span class="text-xs text-base-content/60">构建日期</span>
                    </div>
                    <span class="font-medium">{{ new Date().toLocaleDateString() }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.range::-webkit-slider-thumb {
  @apply bg-primary border-4 border-base-100 hover:scale-125 transition-transform;
  height: 1rem;
  width: 1rem;
}

.range {
  @apply h-1.5 rounded-full appearance-none cursor-pointer;
}

.checkbox {
  @apply rounded-lg transition-all;
}

.checkbox:checked {
  @apply border-4 scale-105;
}

.card {
  @apply hover:bg-base-300/50;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--p)/0.2) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-primary/20 rounded-full hover:bg-primary/40 transition-colors;
}
</style>